<template>
  <div class="bg-white rounded-lg shadow-lg p-6">
    <div class="flex items-center">
      <div class="w-16 h-16 bg-gray-200 rounded-full overflow-hidden mr-4">
        <img src="../../../assets/svg/supportmale.svg" alt="User avatar" class="w-full h-full object-cover" />
      </div>
      <div class="flex-grow">
        <h2 class="text-lg font-lg">{{ userInfo.userName }}</h2>
        <p class="text-gray-600">{{ userInfo.email }}</p>
      </div>
      <Button type="primary" @click="openModal"> 编辑 </Button>
    </div>
    <div class="mt-4 w-1/2 min-w-340px max-w-400px">
      <dl class="mt-2 grid grid-cols-2 gap-x-1 gap-y-2 text-sm text-gray-600">
        <div class="font-medium">姓名:</div>
        <div>{{ userInfo.name }}</div>
        <div class="font-medium">手机号:</div>
        <div>{{ userInfo.phone }}</div>
        <div class="font-medium">状态:</div>
        <div>{{ userInfo.status }}</div>
        <div class="font-medium">所属组织:</div>
        <div>{{ userInfo.orgName }}</div>
        <div class="font-medium">创建时间:</div>
        <div>{{ userInfo.createdTime }}</div>
      </dl>
    </div>
  </div>

  <div class="">
    <UserForm @success="getUserInfo" ref="userFormRef" />
  </div>
  <div class="flex"></div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import UserForm from '/@/views/sys/userInfo/userForm.vue';

import { Button } from 'ant-design-vue';
import { viewSaaSUser } from '/@/api/organization-mgmt/user';
import { getUserId } from '../../../hooks/globVar/index';

const userInfo = ref({
  userName: undefined,
  createdTime: undefined,
  email: undefined,
  status: undefined,
  phone: undefined,
  orgName: undefined,
});

const userFormRef = ref(null);

const openModal = () => {
  userFormRef.value.setFormValue({ ...userInfo.value });
  userFormRef.value.openModal();
};

const getUserInfo = () => {
  const userId = getUserId();
  viewSaaSUser({ userId }).then(async (res) => {
    userFormRef.value.setFormValue(res);
    userInfo.value = res;
  });
};

getUserInfo();
</script>
